<template>
  <div class="wrapper">
    <div class="allOrderContainer">
      <!-- 订单操作 -->
      <div class="actions">
        <div class="left">
          <el-button v-permission="'examine_create'" style="margin-bottom: 10px" type="primary" plain size="mini"
            @click="handleClickOperation('CREATE')">创建</el-button>
          <el-button v-permission="'examine_delete'" style="margin-bottom: 10px" type="primary" plain size="mini"
            @click="handleClickOperation('DELETE')">删除</el-button>
        </div>
        <div class="right">
          <div class="right">
            <el-pagination small :current-page="paginations.pageIndex" :page-sizes="paginations.pageSizes"
              :page-size="paginations.pageSize" :layout="paginations.layout" :total="paginations.total"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </div>
      </div>
      <el-table :data="tableData" border align="center" stripe @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="45"> </el-table-column>
        <el-table-column prop="" fixed label="序号" width="50" type="index"></el-table-column>
        <el-table-column prop="name" label="审核流程名称"></el-table-column>
        <!-- <el-table-column prop="branch_name" label="组织部门"></el-table-column> -->
        <el-table-column prop="scene_type" label="审核类型">
          <template slot-scope="scope">
            {{['','应付审核','报销审核'][scope.row.scene_type]}}
          </template>
        </el-table-column>
        <el-table-column prop="update_time" label="更新时间" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-time="scope.row.update_time"></span>
          </template>
        </el-table-column>
        <el-table-column prop="" fixed="right" align="center" label="操作" width="120">
          <template slot-scope="scope">
            <el-button v-permission="'examine_detail'" style="margin-right: 10px" type="text" plain size="mini"
              @click="handleClickEdit(scope.row, 'detail')">详情
            </el-button>
            <el-button v-permission="'examine_update'"  style="margin-right: 10px" type="text" plain size="mini"
              @click="handleClickEdit(scope.row, 'edit')">编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-drawer :key="Math.random()" size="60%" :visible.sync="drawerVisible" direction="rtl"
      :before-close="handleClose">
      <template slot="title">
        <div>
          {{ this.modetip }}
        </div>
      </template>
      <AuditProcess :mode="mode" :id="nowId" @close="handleCloseDrawer"></AuditProcess>
    </el-drawer>
  </div>
</template>

<script>
import { ExamineListFn, ExamineCreateFn, ExamineDelete, ExamineUpdate, ExamineDetail } from "@/api/auditing";
import AuditProcess from './auditprocess.vue';

export default {
  name: 'auditprocesslist',
  components: { AuditProcess },
  props: [],
  data() {
    return {
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 1页显示多少条
        pageSizes: [10, 20, 50, 100], //每页显示多少条
        total: 0,
        layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
      },
      tableData: [],
      searchParams: {},
      drawerVisible: false,
      mode: '',
      nowId: '',
      checkedRows: []
    };
  },
  computed: {
    modetip() {
      const {mode} = this;
      const text='审核流程'
      if (mode === "add") {
        return `创建${text}`;
      } else if (mode === "edit") {
        return `修改${text}`;
      } else if (mode === "detail") {
        return `${text}详情`;
      }
    },
  },
  mounted() {
    this.getAuditList();
  },
  methods: {
    handleClickOperation(type) {
      if (type === 'CREATE') {
        this.mode = 'add';
        this.drawerVisible = true;
      } else if (type === 'DELETE') {
        ExamineDelete({ ids: this.checkedRows }).then(res => {
          if (res.code === 10000) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getAuditList();
          }

        });
      }
    },

    handleClose() {
      this.drawerVisible = false;
    },
    handleCloseDrawer(isUpdate) {
      this.drawerVisible = false;
      isUpdate && this.getAuditList();
    },

    handleClickEdit({ id }, mode) {
      this.nowId = id;
      this.mode = mode;
      this.drawerVisible = true;
    },
    handleSelectionChange(val) {
      this.checkedRows = val.map((item) => item.id);
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.paginations.pageSize = val;
      this.getAuditList();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.paginations.pageIndex = val;
      this.getAuditList();
    },
    getAuditList() {
      ExamineListFn({
        page: this.paginations.pageIndex,
        page_size: this.paginations.pageSize,
        ...this.searchParams
      }).then((res) => {
        this.paginations.total = res.data.total;
        this.tableData = res.data.list || [];
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.allOrderContainer {
  padding: 10px;
  margin-top: 5px;
  margin-left: 5px;
  background-color: #fff;

  .orderHeader {
    background-color: #fff;

    .orderSearch {
      ::v-deep .el-form--inline .el-form-item__content {
        vertical-align: middle;
      }

      ::v-deep .el-collapse {
        border-top: none;
        border-bottom: none;
      }
    }
  }

  .actions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    background-color: #fff;
  }
}
</style>